<template>
  <div>
    <word ref="word"></word>
    <Row :gutter="20" style="margin-top: 10px">
      <Col :span="12">
        <Row :gutter="20">
          <i-col span="12" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
            <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
              <count-to :end="infor.count" count-class="count-style"/>
              <p>{{ infor.title }}</p>
            </infor-card>
          </i-col>
        </Row>
      </Col>
      <Col :span="12">
        <Row :gutter="20">
          <Col :span="24">
            <Card title="公告" shadow style="min-height: 250px">
              <ul style="padding-left: 20px;padding-right: 20px">
                <li v-for="item in this.notices" :key="item.id" style="color: red" @click="showMessage(item.content)">
                  <a>{{item.title}}</a>
                </li>
              </ul>
            </Card>
          </Col>
        </Row>
        <Row :gutter="20" style="margin-top: 10px;">
          <Col :span="24">
            <Card title="下载" shadow style="min-height: 250px;">
              <ul style="padding-left: 20px;padding-right: 20px">
                <li v-for="item in this.files" :key="item.uuid" style="color: blue" @click="downFile(item.uuid)">
                  <a>{{item.title}}</a>
                </li>
              </ul>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import word from '_c/word/word.vue'
import { listAllNotice } from '../../api/sys/notice'
import { listAllFile } from '../../api/sys/download'
import { download } from '../../api/sys/appendix'
import { homeInfo } from '../../api/home'

export default {
  name: 'home',
  components: {
    CountTo,
    word,
    InforCard
  },
  data () {
    return {
      modal1: false,
      content: '',
      notices: [],
      files: [],
      inforCardData: []
    }
  },
  computed: {
    project () {
      return this.$store.state.user.projectId
    }
  },
  methods: {
    downFile (uuid) {
      download(uuid).then(res => {
      })
    },
    showMessage (content) {
      this.$refs['word'].show(content)
    },
    cancel () {
      this.modal1 = false
    },
    init () {
      homeInfo().then(res => {
        this.inforCardData = res.data
      })
      listAllFile().then(res => {
        this.files = res.data
      })
      listAllNotice().then(res => {
        this.notices = res.data
      })
    }
  },
  mounted () {
    //
    this.init()
  }
}
</script>

<style less>
  .count-style{
    font-size: 50px;
  }
</style>
